<template>
	<view>
		<view class="user-section">
			<image class="bg" src="/static/user-bg.jpg"></image>
			<text class="bg-upload-btn yticon icon-paizhao"></text>
			<view class="portrait-box">
				<image class="portrait" @tap="changeHead()" :src="userInfo.pic || '/static/missing-face.png'">
				</image>
				<text class="pt-upload-btn yticon icon-paizhao"></text>
			</view>
		</view>
		<view class="list-cell b-b m-t" @click="" hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">姓名</text>
			<input type="text" class="cell-titr" v-model="userInfo.name" />
			<text class="cell-more yticon icon-you"></text>
		</view>
		<view class="list-cell b-b m-t" @click="" hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">昵称</text>
			<input type="text" class="cell-titr" v-model="userInfo.nickName" />
			<text class="cell-more yticon icon-you"></text>
		</view>
		<!-- <view class="list-cell b-b m-t" @click="" hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">密码</text>
			<input type="text" class="cell-titr" :value="userInfo.password" :password="showPassword"></input>
			<text class="uni-icon" :class="[!showPassword ? 'uni-eye-active' : '']"
				@click="changePassword">&#xe568;</text>
			<text class="cell-more yticon icon-you"></text>
		</view> -->
		<view class="list-cell b-b m-t" @click="" hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">手机号</text>
			<input type="text" class="cell-titr" v-model="userInfo.phone" />
			<text class="cell-more yticon icon-you"></text>
		</view>
		<view>
			<button class="button" type="default" plain="true" @click="updateUserInfo">确认修改</button>
		</view>
	</view>
</template>

<script setup>
	// import {
	// 	mapState,
	// 	mapMutations
	// } from 'vuex';
	import api from '@/utils/api.js'
	export default {
		data() {
			return {
				userInfo: {
					name: '',
					nickName: '',
					phone: '',
					pic: '',
				},
				showPassword: true,
			};
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			async getUserInfo() {
				// 获取用户信息
				api.userInfo().then(res => {
					if (res.code == 200) {
						this.userInfo = res.data
						// console.log(this.userInfo)
					}
				})
			},
			async updateUserInfo() {
				console.log(this.userInfo)
				console.log(this.userInfo.name)
				api.userUpdate({
					"id": this.userInfo.id,
					"name": this.userInfo.name,
					"nickName": this.userInfo.nickName,
					"phone": this.userInfo.phone,
					"pic": this.userInfo.pic
				}).then(res => {
					if (res.code == 200) {
						//this.userInfo = res.data
						uni.showToast({
							title: '更新成功'
						})
					}
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					})
				})
			},
			changePassword: function() {
				this.showPassword = !this.showPassword;
			},
			changeHead() {
				// 选择图像
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log(tempFilePaths[0])
						// 上传文件
						uni.uploadFile({
							url: 'http://127.0.0.1:9100/api/user/upload/pic', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								'Authorization': uni.getStorageSync('token')
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes);
								// 获取上传图像的接口返回的数据
								let data = uploadFileRes.data
								data = JSON.parse(data);
								if (data.code == 200) {
									console.log(data.data)
									this.userInfo.pic = data.data
								}
							}
						});
					}
				});
			},
		},
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}

	.user-section {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 460upx;
		padding: 40upx 30upx 0;
		position: relative;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
			opacity: .7;
		}

		.portrait-box {
			width: 200upx;
			height: 200upx;
			border: 6upx solid #fff;
			border-radius: 50%;
			position: relative;
			z-index: 2;
		}

		.portrait {
			position: relative;
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}

		.yticon {
			position: absolute;
			line-height: 1;
			z-index: 5;
			font-size: 48upx;
			color: #fff;
			padding: 4upx 6upx;
			border-radius: 6upx;
			background: rgba(0, 0, 0, .4);
		}

		.pt-upload-btn {
			right: 0;
			bottom: 10upx;
		}

		.bg-upload-btn {
			right: 20upx;
			bottom: 16upx;
		}
	}

	.list-cell {
		display: flex;
		align-items: baseline;
		padding: 20upx $page-row-spacing;
		line-height: 60upx;
		position: relative;
		background: #fff;
		justify-content: center;

		&.log-out-btn {
			margin-top: 40upx;

			.cell-tit {
				color: $uni-color-primary;
				text-align: center;
				margin-right: 0;
			}
		}

		&.cell-hover {
			background: #fafafa;
		}

		&.b-b:after {
			left: 30upx;
		}

		&.m-t {
			margin-top: 16upx;
		}

		.cell-more {
			align-self: baseline;
			font-size: $font-lg;
			color: $font-color-light;
			margin-left: 10upx;
		}

		.cell-tit {
			flex: 1;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			margin-right: 10upx;
		}

		.cell-tip {
			font-size: $font-base;
			color: $font-color-light;
		}

		switch {
			transform: translateX(16upx) scale(.84);
		}
	}

	.cell-titr {
		color: gray;
		text-align: right;
		margin-right: 0;
	}

	.uni-icon {
		font-family: uniicons;
		font-size: 24px;
		font-weight: normal;
		font-style: normal;
		width: 24px;
		height: 24px;
		line-height: 24px;
		color: #999999;
	}

	.uni-eye-active {
		color: #007AFF;
	}

	.button {
		margin: 0 auto;
		width: 60%;
		margin-top: 10px;
	}
</style>